<!-- src/views/user/IndexView.vue -->

<template>
    <div id="login">


        <div class="center">
            <div class="person">
                <div class="touxiang">
                    <img :src="status?userinfo.avatarUrl:''" alt="">
                </div>
                <div class="userdata">
                    <p @click="tologin">{{ status?'娇娇':'未登录，请登录'}}</p>
                    <h3 v-if="userinfo!=''&&status">{{ _filter(userinfo.phone)}}</h3>
                </div>
                <div class="set">
                    账户设置
                </div>
            </div>
            <div class="card1">
                <div>
                    <b>吃货卡</b>
                    <i>|</i>
                    <em>吃货豆：</em>
                    <span>1461</span>
                </div>
                <p>升级超级吃货卡,每月得无门槛红包,下单5倍返吃货豆</p>
                <van-icon name="arrow" class="to" />
            </div>
            <div class="card2">
                <div class="left">
                    <div>
                        <van-icon class="icon" name="bill" />
                        <i>红包</i>
                    </div>
                    <p>7张今日到期</p>
                </div>
                <div class="right">
                    <div>
                        <van-icon class="icon" name="coupon" />
                        <i>余额</i>
                    </div>
                    <p>0元</p>
                </div>
            </div>
            <div class="card3">
                <h3>常用工具</h3>
                <figure>
                    <figcaption>
                        <van-icon name="location-o" />
                        我的地址
                    </figcaption>
                    <figcaption>
                        <van-icon name="service-o" />
                        我的客服
                    </figcaption>
                    <figcaption @click="$router.push('/collect')">
                        <van-icon name="like-o" />
                        店铺关注
                    </figcaption>
                    <figcaption>
                        <van-icon name="star-o" />
                        评价有礼
                    </figcaption>
                </figure>
            </div>
            <div class="cardlist">
                <div class="card">
                    <h4>邀好友赚现金</h4>
                    <p>最高得15元</p>
                    <div>
                        <van-icon class="icon" name="gift-card" />
                    </div>
                    <nav>
                        <article>去邀请</article>
                        <article>查佣金</article>
                    </nav>
                </div>
                <div class="card">
                    <h4>饿了么服务号</h4>
                    <p>关注后及时接收系统通知</p>
                    <div>
                        <van-icon class="icon" name="invitation" />
                    </div>
                    <nav>
                        <article>立即关注</article>
                     
                    </nav>
                </div>
                <div class="card">
                    <h4>饿了么服务号</h4>
                    <p>关注后及时接收系统通知</p>
                    <div>
                        <van-icon class="icon" name="invitation" />
                    </div>
                    <nav>
                        <article>立即关注</article>

                    </nav>
                </div>
                <div class="card">
                    <h4>饿了么服务号</h4>
                    <p>关注后及时接收系统通知</p>
                    <div>
                        <van-icon class="icon" name="invitation" />
                    </div>
                    <nav>
                        <article>立即关注</article>

                    </nav>
                </div>
                <div class="card">
                    <h4>饿了么服务号</h4>
                    <p>关注后及时接收系统通知</p>
                    <div>
                        <van-icon class="icon" name="invitation" />
                    </div>
                    <nav>
                        <article>立即关注</article>
                        
                    </nav>
                </div>
                <div class="card">
                    <h4>饿了么服务号</h4>
                    <p>关注后及时接收系统通知</p>
                    <div>
                        <van-icon class="icon" name="invitation" />
                    </div>
                    <nav>
                        <article>立即关注</article>
                
                    </nav>
                </div>
                <div class="card">
                    <h4>饿了么服务号</h4>
                    <p>关注后及时接收系统通知</p>
                    <div>
                        <van-icon class="icon" name="invitation" />
                    </div>
                    <nav>
                        <article>立即关注</article>

                    </nav>
                </div>
                <div class="card">
                    <h4>饿了么服务号</h4>
                    <p>关注后及时接收系统通知</p>
                    <div>
                        <van-icon class="icon" name="invitation" />
                    </div>
                    <nav>
                        <article>立即关注</article>
                    </nav>
                </div>

            </div>
        </div>

    </div>
</template>
  
<script lang="ts">
export default {
    mounted() {
        if (localStorage.getItem("userinfo") && localStorage.getItem("token")) {
            this.status = true
            this.userinfo = JSON.parse(localStorage.getItem("userinfo"))
        }
    },
    data() {
        return {
            userinfo: {},
            status: false
        }
    },
    methods: {
        _filter(phone: string) {
            return phone.slice(0, 3) + '****' + phone.slice(7)
        },
        tologin() {
            if (!this.status) {
                this.$router.push('/login')
            }
        }
    }
}
</script>
  
<style scoped lang="scss">
.center {
    width: 93.6%;


}

#login {
    background-color: rgb(245, 245, 245);
    margin-left: 10px;

    .person {
        margin-top: .2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;

        .touxiang {
            width: .6rem;
            height: .6rem;
            border-radius: 50%;
            overflow: hidden;
            background-color: violet;
        img{
            width:100%;

        }
        }

        .userdata {
            flex: 1;
            margin-left: .1rem;

            h3 {
                font-size: .12rem;
                margin-top: .1rem;
            }
        }
        .set {
            width: .65rem;
            height: .25rem;
            border-radius: .25rem;
            border: .01rem solid rgb(211, 211, 211);
            font-size: .12rem;
            line-height: .25rem;
            text-align: center;

        }
    }

    .card1 {
        height: .65rem;
        position: relative;
        background-image: linear-gradient(to right, rgb(0, 151, 244), rgb(37, 196, 253));
        margin-top: .1rem;
        border-radius: .08rem;
        padding: .12rem .15rem;
        font-size: .12rem;
        color: #fff;

        b {
            font-size: .18rem;
            font-style: italic;
        }

        i {
            margin: 0 .1rem;
        }

        span {
            font-size: .18rem;
        }

        p {
            margin-top: .05rem;
            color: rgb(127, 202, 249)
        }

        .to {
            position: absolute;
            right: .15rem;
            top: 50%;
            transform: translateY(-50%);
        }
    }

    .card2 {
        margin-top: .08rem;
        height: .7rem;
        background-color: #fff;
        display: flex;
        align-items: center;
        border-radius: .08rem;

        div {
            text-align: center;
            flex: 1;

            .icon {
                color: rgb(254, 93, 59);
            }

            i {
                font-weight: 700;
                margin-left: .05rem;
            }

            p {
                font-size: .12rem;
                color: rgb(151, 151, 151);
                padding-top: .05rem;
            }
        }
    }

    .card3 {
        height: 1.05rem;
        background-color: #fff;
        padding: .12rem;
        margin-top: 0.07rem;
        display: flex;
        flex-direction: column;
        border-radius: .08rem;

        h3 {
            font-weight: 700;
        }

        figure {
            display: flex;
            flex: 1;

            figcaption {
                display: flex;
                flex-direction: column;
                flex: 1;
                align-items: center;
                justify-content: center;
            }
        }
    }

    .cardlist {
        margin-top: .1rem;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .card {
            width: 40%;
            height: 1.85rem;
            background: #fff;
            border-radius: .08rem;
            margin-bottom: .08rem;
            padding: .15rem .12rem;

            h4 {
                font-weight: 700;
            }

            p {
                font-size: .12rem;
                color: rgb(179, 179, 179);
                margin: .08rem 0;
            }

            div {
                width: 100%;
                height: .7rem;
                background-color: rgb(249, 249, 249);
                text-align: center;
                padding-top: .1rem;
                line-height: .7rem;

                .icon {
                    color: rgb(254, 100, 89);
                    font-size: .4rem;
                    border-radius: .05rem;
                }
            }

            nav {
                width: 100%;
                display: flex;
                justify-content: center;
            }

            nav article {
                margin-top: .1rem;
                width: .7rem;
                height: .28rem;
                font-size: .12rem;
                border: 0.01rem solid rgb(209, 209, 209);
                border-radius: .14rem;
                text-align: center;
                line-height: .28rem;
                margin-right: .1rem;
            }
        }
    }
}
</style>